<template>
 <div>
   <div class="user">
     <img class="user-header" alt="" :src="userHeaderSrc" />
     <span class="score"><span>{{score}}</span>分</span>
   </div>
</div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  name: 'userInfo',
  data () {
    return {
      userHeaderSrc: 'https://oimagea3.ydstatic.com/image?id=1733557029632259911&product=adpublish&w=640&h=480&sc=0&rm=2&gsb=0&gsbd=60'
    }
  },
  components: {

  },
  computed: {
    ...mapState({
      score: state => state.Weixin.score
    })
  },
  methods: {

  },
  created () {

  },
  mounted () {

  }
}
</script>
<style lang='scss' scoped>
  .user {
    width: 179px;
    height: 96px;
    background: url(../assets/images/score.png) no-repeat;
    background-size: 100% 100%;
    line-height: 96px;
    padding-left: 16px;

    .user-header {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      position: relative;
      top: -10px;
    }

    .score {
      margin-left: 14px;
      color: #fff;
      font-size: 38px;
      span {
        padding-right: 2px;
      }
    }
  }
</style>
